<template>
  <div class="layout_one">
    {{ title }}
    <el-button type="danger" text icon="Refresh">清空列表</el-button>
    <div class="box">
      <div class="imgList">
        <div style="margin-bottom: -2px">
          <svg-icon :name="`xiala`" />
        </div>
        <svg-icon :name="`xiala`" />
      </div>
    </div>
    <div class="myself">
      <svg-icon :name="`xiala`" />
    </div>
    <div
      class="black"
      style="width: 100px; height: 100px; border: solid 1px red"
    >
      123
    </div>

    <p>这里是页面</p>
    <el-icon
      @click="handleToggleTheme(0)"
      :class="{ themeSelect: index === 0 }"
    >
      <Moon />
    </el-icon>

    <el-icon
      @click="handleToggleTheme(1)"
      :class="{ themeSelect: index === 1 }"
    >
      <Sunny />
    </el-icon>
  </div>
</template>
    
<script lang="ts">
import { defineComponent, reactive, toRefs } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { queryAll } from "@/api/jiaoyu/xiaoyuanguanli/banji";

export default defineComponent({
  name: "XueSheng",
  setup() {
    const state = reactive({
      title: "这是学生",
      list: [],
      arrow: require("@/assets/icons/imgs/arrow.svg"),
      index: 0,
    });

    const router = useRouter();

    const getList = async () => {
      const a = await queryAll();
      console.log(a);
    };

    getList();

    const handleToggleTheme = (index: number) => {
      state.index = index;
      window.document.documentElement.setAttribute(
        "data-theme",
        index ? "dark" : "light"
      );
    };

    return {
      ...toRefs(state),
      getList,
      handleToggleTheme,
    };
  },
});
</script>
    
<style lang="scss" scoped>
.box {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.imgList {
  animation: rolling 0.8s linear infinite;
  /* position: absolute; */
  /* display: flex; */
}

@keyframes rolling {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}

.myself {
  animation-name: myselfA;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes myselfA {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-25%);
  }
}

.black {
  background: $white-background;
}

@import "@/assets/styles/_handle.scss";

p {
  font-size: 18px;
  @include font_color("color-warning");
  @include background_color("background");
  @include border_color("color-success");
}
</style>